<template>
  <div style="height: 100%">
    <myheader
        :title="title"
        :chn="chn"
        @clickSetting="setting"
        @clickBack="back"
        @showHelp="doShowHelp"
        :photo-url='photoURL'>
      <h_menu ref="hMenu"
              v-if="isShowHorizontalMenu"
              v-show="isShowHorizontalMenu&&isSettingStatus"
              style="min-width: 300px;margin-left: 50px"
              :content="hContent"
              @setFirstPage = 'firstActiveMenu=$event'
              @doSelect="doHeaderMenuSelect"/>
      <el-breadcrumb style="margin-left: 60px" v-if="isShowVerticalMenu&&!isSettingStatus" separator="/">
<!--        <el-breadcrumb-item ><span @click="doGotoMenu(firstActiveMenu)" style="cursor: pointer" class="breadcrumb-content" >首页</span></el-breadcrumb-item>-->
<!--        <el-breadcrumb-item :key="item.name" v-for="item in breadcrumbItems"><span class="breadcrumb-content" :class="{'breadcrumb-is-active':item.isActive}">{{item.name}}</span></el-breadcrumb-item>-->
      </el-breadcrumb>
    </myheader>
    <v_menu ref="vMenu"
            :collapse = 'isCollapse'
            :style="{height:menuHeight,width:menuWidthPx}"
            style="display:inline-block;"
            v-show="isShowVerticalMenu&&!isSettingStatus"
            :content = "vContent"
            @setFirstPage = 'firstActiveMenu = $event'
            @doSelect="doHeaderMenuSelect">
    </v_menu>
    <div
      v-if="isShowVerticalMenu"
      :style="{width:menuWidthPx}"
         v-show="!isSettingStatus"
         class="vmenu-footer"
    >
      <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="changeMenuClass"/>
    </div>
    <div class="box"
         :class="{'box-t':!isSettingStatus}"
         @scroll="scroll"
         :style="{width: isSettingStatus?'100%':`calc(100% - ${menuWidthPx})`,height:contentHeight}">
        <keep-alive >
          <router-view ref="page" v-if="!isOutOfInternet" ></router-view>
        </keep-alive>
        <div class="no-internet" v-if="isOutOfInternet">
            <svg-icon style="font-size: 311px" :icon-class="outInternetIcon"/>
            <div class="content1" ><span>网络断开</span></div>
            <div class="content2" ><span>抱歉 请检查网络连接哦！</span></div>
        </div>
    </div>
    <help-tip ref="helpTip" v-show="isShowVerticalMenu && !isSettingStatus"/>
<!--    <myfooter :info="info"></myfooter>-->
  </div>
</template>
<script>
import myheader from "@/components/header.vue";
import myfooter from "@/components/footer.vue";
import constants from "@/util/constants";
import {debounce} from "@/util";
import store from "@/store";


export default {
  data() {
    return {
      breadcrumbItems:[],
      isCollapse: false,
      menuWidth: this.$store.state.setting.isShowVerticalMenu?this.$store.getters.menuWidth:0,
      chn: this.$store.getters.chn,
      photoURL: this.$store.getters.photoURL,
      title: this.$store.getters.name,
      info: {
        zr: 'XXX',
        it: 'XXX',
        ui: 'XXX',
        date:'2023-10-10'
      },
      vContent: [],
      hContent: [],
      firstActiveMenu:'',
      currentActiveMenu:'',
      routerMap:new Map()
    };
  },
  computed: {
    currentClickHeaderTip(){
      return this.$store.getters.currentClickHeaderTip
    },
    isOutOfInternet(){
      return this.$store.getters.isOutOfInternet
    },
    outInternetIcon(){
      return this.$store.getters.theme === 'light'?'outInternet_l':'outInternet_d'
    },
    menuHeight(){
      return `${this.documentHeight - 58 - 40}px`
    },
    contentHeight() {
      return `${this.documentHeight - 58}px`
    },
    menuWidthPx() {
      return `${this.menuWidth}px`
    },
    documentHeight(){

      return      this.$store.getters.documentHeight
    },
    isSettingStatus(){
      return this.$store.state.business.isSettingStatus
    },
    isShowVerticalMenu(){
      return this.$store.state.setting.isShowVerticalMenu
    },
    isShowHorizontalMenu(){
      return this.$store.state.setting.isShowHorizontalMenu
    }
  },
  methods: {
    doShowHelp() {
      this.$refs.vMenu.doOpenAll()
      if(this.isCollapse ){
        this.changeMenuClass()
        setTimeout(_=>this.$refs.helpTip.doMyOpen(),100)
      }else{
        this.$refs.helpTip.doMyOpen()
      }
    },
    doGotoMenu(menu) {
      if (!menu) return
      if (menu.mode === 'horizontal') {
        this.isSettingStatus || this.$store.commit('SET_SETTING_STATUS')
        this.$refs.hMenu.activeMenu = menu
      } else {
        this.isSettingStatus && this.$store.commit('SET_SETTING_STATUS')
        this.$refs.vMenu.activeMenu = menu
        this.changeBread(menu)
      }
      this.$router.push(menu.path)
    },
    back(){
      this.isShowHorizontalMenu&&this.doHeaderMenuSelect(this.$refs.hMenu.activeMenu)
    },
    changeMenuClass() {
      if (this.menuWidth === this.$store.getters.menuWidth) {
        this.menuWidth = 58
      } else {
        this.menuWidth = this.$store.getters.menuWidth
      }
      this.isCollapse = this.menuWidth === 58
      this.$store.commit('SET_IS_VMENU_COLLAPSE');
    },
    setting() {
      this.doHeaderMenuSelect(this.$refs.vMenu.activeMenu)
    },
    changeBread(menu){
      this.breadcrumbItems = Array.from(menu.nameArr,name=>({name:name,isActive:false}))
      this.breadcrumbItems[this.breadcrumbItems.length-1].isActive = true;
    },
    doHeaderMenuSelect(res) {
      res.mode==='vertical' && this.changeBread(res)
      this.$router.push(res.path)
    },
    scroll() {
      this.$store.getters.popperItems.forEach(item => {
        if (item.popperShow) {
          const ele = item.popperElement()
          ele && (ele.style.opacity = "0")
          item.showDown()
        }
      })
      scroll.call(this)
    },
    initHorizontalMenus(option,routePath){
      const root = option.path
      const children = option.children.slice(0,option.children.length-2)
      this.hContent = Array.from(children,(item)=>{
        const path = `${root}/${item.path}`
        const res = {
          title:item.meta.name,
          path,
          mode: 'horizontal' ,
        }
        this.routerMap.set(path,res)
        routePath === `${root}/${item.path}` && (this.currentActiveMenu = res)
        item.meta.home && (res.home=true)
        return res
      })
    },
    initVerticalMenus(option,routePath){
      const dispose = (children,path,nameArr)=>{
        return Array.from(children,item=>{
          const arrName = nameArr || []
          const meta = item.meta
          const result = {title: meta.name, mode: 'vertical',}
          meta.home && (result.home=true)
          meta.hasOwnProperty('icon') && (result.icon = meta.icon)
          meta.hasOwnProperty('showHelpInfo') && (result.showHelpInfo = meta.showHelpInfo)
          if(item.hasOwnProperty('children')&&item.children.length>0){
            arrName.push(meta.name)
            result.children = dispose(item.children,`${path}/${item.path}`,arrName)
          }else{
            result.nameArr = [...arrName,meta.name]
            result.path = `${path}/${item.path}`
            this.routerMap.set(result.path,result)
            routePath === result.path  && (this.currentActiveMenu = result)
          }
          return result
        })
      }
      const children = option.children.slice(0,option.children.length-2)
      this.vContent = dispose(children,option.path)
    },
    initMenus(){
      const path = this.$route.fullPath
      const options = this.$router.options.routes
      options.forEach(option=>{
        if(option.hasOwnProperty('type')){
          if(option.type === 'horizontal'){
            this.initHorizontalMenus(option,path)
          }else if(option.type === 'vertical'){
            this.initVerticalMenus(option,path)
          }
        }
      })
    },
  },
  components: {
    myheader,
    myfooter,
  },
  watch:{
    $route:{
      handler(){
        this.$store.commit('SET_IS_OUT_OF_INTERNET',false)
      },
      immediate:true
    },
    currentClickHeaderTip(){
      this.doGotoMenu(this.routerMap.get(this.currentClickHeaderTip.content.path))
      setTimeout(()=>{
        this.$refs.page.doClickHeadTip(this.currentClickHeaderTip)
      },0)
    }
  },
  created() {
    this.initMenus()
    this.$watch(()=>{
      return this.$store.state.business.isSetFullScreen
    },()=>{
      setTimeout(()=>{
        this.$store.commit('SET_DOCUMENT_HEIGHT',this.$getDocumentHeight())
        document.body.style.height = `${this.documentHeight}px`
      },100)
    })
  },
  mounted() {
    this.$store.commit('SET_DOCUMENT_HEIGHT',this.$getDocumentHeight())
    const path = this.$route.fullPath
    const reg = /.*(horizontal|vertical)\/.+$/
    if(!reg.test(path)){
      if(path.includes('vertical')&&this.isShowVerticalMenu){
        this.$store.commit('SET_SETTING_STATUS')
        this.doHeaderMenuSelect(this.$refs.vMenu.activeMenu)
      }else if(path.includes('horizontal')&&this.isShowHorizontalMenu){
        this.doHeaderMenuSelect(this.$refs.hMenu.activeMenu)
      }
    }else{
      this.doGotoMenu(this.currentActiveMenu)
    }
  },
};
</script>
<style scoped>
.box-t{
  transition: width 0.28s;
}
.box {
  transition: height 0.28s;
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  overflow-y: hidden;
  padding: 5px 5px
}

</style>
